<template>
  <div id="grandson">
    三级级组件 -- 孙子级别 --- 信息：{{ info.name }} -- {{ info.age }} --
    {{ info.gender }}
    <div>
      <button @click="age += 1">测试修改数据</button>
    </div>
  </div>
</template>

<script>
import { setup, inject, toRefs, onMounted } from "vue";

export default {
  setup() {
    const info = inject("info");

    console.log("注入name ：", inject("name"));

    // onMounted(() => {
    //   setTimeout(() => {
    //     console.log("孙组件中的定时器触发");
    //     info.age += 1;
    //   }, 5000);
    // });

    return {
      info,
      ...toRefs(info),
    };
  },
};
</script>

<style scoped>
#grandson {
  background: blue;
  padding: 20px;
}
</style>
